<template>
  <!-- 本页面是长列表懒加载,还有个长列表虚拟加载组件（sickListPage.vue）。优先使用懒加载，具体后面再看 -->
  <view class="sickBody">
    <view class="sickBodyBg">
      <view class="pageTitle">
        搜索疾病
        <view class="pageClose" @click="close"><img :src="closeIcon" /></view>
      </view>
      <search-view :disabled="false" :showTxt="true" :placeholder="placeholder" @confirm="confirm" />
      <!-- <scroll-view scroll-y="true" class="scroll-Y" lower-threshold="50" @scrolltolower="lower"> -->
      <view v-if="sickListBox" class="parentDom">
        <view class="positionRelative" :style="{ transform: getTransform }">
          <view
            v-for="item in pageListData"
            :key="item.id"
            :class="[item.cur ? 'height40 cur' : 'height40']"
            @click="choseSick(item)"
          >
            {{ item.name }}
            <span v-show="item.cur" class="curIcon"><img :src="choseIcons" /></span>
          </view>
        </view>
      </view>
      <!-- </scroll-view> -->
    </view>
  </view>
</template>

<script>
/**
 * 搜索组件
 */
import searchView from '@/components/searchView';
import { getDiseasesList } from '@/api/join.js';
export default {
  components: { searchView },
  props: {
    // 是否展示搜索按钮
    sickAllList: {
      type: Array,
      default: null
    },
    listData: {
      type: Array,
      default: () => []
    },
    itemSize: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      searchList: [],
      placeholder: '输入关键字查询病症',
      // screenHeight: 1200,
      startOffset: 0,
      start: 0,
      end: 20,
      scrollTData: 0,
      count: 20,
      pageListData: [],
      page: 1,
      num: 20,
      closeIcon:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/close.png',
      choseIcons:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/choseIcon.png',
      // testData: []
      skip: 0,
      limit: 10,
      name: '',
      sickListBox: true
    };
  },
  computed: {
    screenHeight() {
      return wx.getSystemInfoSync().windowHeight + 450;
    },
    getTransform() {
      return `translate3d(0,${this.startOffset}px,0)`;
    }
  },
  mounted() {
    console.log('所有数据', this.sickAllList, '选中数据', this.listData);
  },
  methods: {
    async getInitSickList() {
      const self = this;
      this.sickListBox = false;
      await getDiseasesList(this.name, this.skip, this.limit).then((res) => {
        this.sickListBox = true;
        if (res.code === 0) {
          let data = res.data;
          if (this.listData.length > 0 && this.listData[0].diseaseId) {
            console.log('1123123', this.listData);
            data.forEach((item, index) => {
              this.listData.forEach((choseItem) => {
                if (choseItem.diseaseId === item.id) {
                  data[index].cur = true;
                }
              });
            });
          } else {
            data.forEach((item, index) => {
              this.listData.forEach((choseItem) => {
                if (choseItem.id === item.id) {
                  data[index].cur = true;
                }
              });
            });
          }
          this.pageListData = data;
        }
      });
      if (this.listData.length > 0 && this.listData[0].diseaseId) {
        this.pageListData.forEach((item, index) => {
          this.listData.forEach((choseItem) => {
            if (choseItem.diseaseId === item.id) {
              self.pageListData[index].cur = true;
            }
          });
        });
      } else {
        this.pageListData.forEach((item, index) => {
          this.listData.forEach((choseItem) => {
            if (choseItem === item.id) {
              this.pageListData[index].cur = true;
            }
          });
        });
      }
    },
    close() {
      this.$emit('popClose');
    },
    center() {
      this.$emit('popCenter');
    },
    confirm(val) {
      if (!val) {
        uni.showToast({
          title: '请输入需要搜索的疾病',
          duration: 2000,
          icon: 'none'
        });
        return false;
      }
      this.name = val;
      this.skip = 0;
      this.getInitSickList();
    },
    choseSick(item) {
      this.$emit('choseSickSearch', item);
    },
    lower(e) {
      console.log('到底了', e);
    }
  }
};
</script>

<style lang="scss">
.sickBody {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
  .sickBodyBg {
    background: #f4f4f4;
    height: 95%;
    margin: 24rpx;
    overflow: hidden;
    border-radius: 16rpx;
    .pageTitle {
      position: relative;
      text-align: center;
      padding: 20rpx;
      background-color: #fff;
      margin-bottom: 40rpx;
      .pageClose {
        position: absolute;
        right: 10rpx;
        top: 14rpx;
        width: 60rpx;
        height: 60rpx;
        img {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
  .infinite-list-container {
    height: 100%;
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  .infinite-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
  }

  .infinite-list {
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    text-align: center;
  }

  .infinite-list-item {
    padding: 10px;
    color: #555;
    box-sizing: border-box;
    border-bottom: 1px solid #999;
  }
  .scroll-Y {
    height: 100%;
    overflow-y: scroll;
  }
  .height40 {
    width: 100%;
    overflow: hidden;
    border-bottom: 1rpx solid #d2d2d2;
    padding: 16rpx 0;
  }
  .positionRelative {
    width: 92%;
    height: 90%;
    margin: 0 3%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 32rpx;
    overflow-y: scroll;
    //   height: 100%;
    //   width: 100%;
    .cur {
      color: #f00;
      position: relative;
      pointer-events: none;
      border: none;
      border-bottom: 1rpx solid #d2d2d2;
      .curIcon {
        position: absolute;
        right: 0rpx;
        top: 8rpx;
        width: 40rpx;
        height: 40rpx;
        img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
.parentDom {
  position: relative;
  height: 80%;
}
</style>
